<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue event</title>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="./lib/vue/vue.js"></script>
    <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/bootstrap/js/bootstrap.js"></script>

    <style>
        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container" id="box">
        <div class="row" @click="parent($event)">
            <ul>阻止事件冒泡
                <li>原生方法：event.cancelBubble = true;</li>
                <li>Vue特色：@click<span style="color:red;">.stop</span></li>
            </ul>
            <div style="height:50px; width:50px; background-color:aquamarine" @click.stop="child($event)" class="">
                子节点区域
            </div>
        </div>
        <div class="row">
            <ul>组织默认行为
                <li>原始方法：e.preventDefault();</li>
                <li>Vue特色：@click.prevent</li>
            </ul>

            <div style="height: 100px; width:100px; background-color:red" @contextmenu.prevent="right()">
                组织默认行为
            </div>
        </div>
        <div class="row">
            <ul>v-bind 绑定属性
                <li>常规写法： v-bind:src="./images/gril.jpg"</li>
                <li>简写：:src="./images/gril.jpg"</li>
            </ul>
            <span></span>
            <img v-bind:src="imgUrl" alt="美女来了" :width="width" :height="height" />
        </div>
        <div class="row">
            <div :class="{red:redBg, blue:blueBg}" style="color:white; width:100px; height:100px">
                :class
            </div>
        </div>
    </div>
</body>


<script>
    var v = new Vue({
        el: '#box',
        data: {
            imgUrl: './images/gril.jpg',
            width: "100px;",
            height: "100px",
            redBg: false,
            blueBg: true
        },
        methods: {
            parent: function (event) {
                alert('parent.');
            },
            child: function (event) {
                alert('child.');
            },
            show: function () {
                alert(1);
            },
            right: function () {
                alert('mouse reight');
            }
        }
    });
</script>

</html>